<template>
  <div class="comp-report-error-work-order-audit">
    <p class="title">工单审核</p>
    <CompTips content="关闭工单审核后，所有工单将跳过工单审核，直接进入下一节点。" />
    <CompModuleHeader title="工单审核">
      <template v-slot:extra>
        <el-switch v-model="formData.isReview" />
      </template>
    </CompModuleHeader>
    <template v-if="formData.isReview">
      <el-form label-width="100px" class="form-box">
        <el-form-item label="审核模式">
          <el-radio v-model="formData.reviewMode" :label="1">按故障来源和分类</el-radio>
          <el-radio v-model="formData.reviewMode" :label="2">按人员</el-radio>
        </el-form-item>
      </el-form>
      <template v-if="formData.reviewMode === 1">
        <CompModuleHeader title="审核模式：按故障来源和分类" />
        <CompTips content="选择工单“故障来源”和“故障分类”的大类，当工单任意满足其一时则需要审核。" />
        <div class="select-box">
          <div class="left">
            <CompCheckBox v-model="checkedFaultSource" :item-props="itemProps" check-all-label="故障来源" :check-list="faultSourceList" />
          </div>
          <div class="divider" />
          <div class="right">
            <CompCheckBox v-model="checkedFaultType" :item-props="itemProps" check-all-label="故障分类" :check-list="faultTypeList" />
          </div>
        </div>
      </template>
      <template v-if="formData.reviewMode === 2">
        <CompModuleHeader title="审核模式：按人员" />
        <CompTips content="添加人员，被选择人员接单，处理，完成的工单都需要被审核。" />
        <div class="user-select-box">
          <div class="top">
            <pure-button label="编辑用户" type="minor" @click="onEditUser" />
            <el-popconfirm
              title="确认清空所有已添加的用户吗？"
              @confirm="onClearStaff"
            >
              <pure-button slot="reference" label="清空" type="text" />
            </el-popconfirm>
          </div>
          <el-divider />
          <div class="selected-box">
            <el-tag
              v-for="staff in staffList"
              :key="staff.userId"
              closable
              @close="onDelStaff(staff.userId)"
            >
              {{ staff.nickName }}
            </el-tag>
          </div>
        </div>
      </template>
    </template>
    <div class="btn-box">
      <pure-button label="应用" :disabled="isButtonDisabled" @click="updateConfig" />
      <pure-button label="取消" type="patch" :disabled="isButtonDisabled" @click="onCancel" />
    </div>
    <custom-drawer
      size="60%"
      :wrapper-closable="false"
      title="编辑用户"
      :visible.sync="showSelectUser"
      @closed="onDialogClosed"
    >
      <CompSelectUser ref="compSelectUserRef" :selected-user="staffList" />
      <template v-slot:footer>
        <pure-button label="保存" @click="onSave" />
        <pure-button type="patch" label="取消" @click="showSelectUser = false" />
      </template>
    </custom-drawer>
  </div>
</template>

<script>
import CompModuleHeader from './module-header.vue';
import CompTips from './tips.vue';
import CompCheckBox from './check-box.vue';
import CompSelectUser from './select-user.vue';
import { getWorkOrderAuditConfigData, updateWorkOrderAuditConfigData, } from '../api';
import { cloneDeep, isEqual, } from 'lodash-es';

export default {
  components: {
    CompModuleHeader,
    CompTips,
    CompCheckBox,
    CompSelectUser,
  },
  data() {
    return {
      originalFormData: null,
      formData: {},
      itemProps: {
        label: 'recordName',
        value: 'recordId',
      },
      faultSourceList: [],
      checkedFaultSource: [],
      faultTypeList: [],
      checkedFaultType: [],
      staffList: [],
      showSelectUser: false,
    };
  },
  computed: {
    isButtonDisabled() {
      console.log('this.updatedStaffList: ', this.updatedStaffList);
      const data = {
        sysOrderReviewConfig: this.formData,
        faultSourceList: this.updatedFaultSourceList,
        faultTypeList: this.updatedFaultTypeList,
        staffList: this.updatedStaffList,
      };
      return !this.originalFormData || isEqual(this.originalFormData, data);
    },
    updatedFaultSourceList() {
      return this.faultSourceList.map(item => {
        if (this.checkedFaultSource.includes(item.recordId)) {
          item.checked = true;
        } else {
          item.checked = false;
        }
        return item;
      });
    },
    updatedFaultTypeList() {
      return this.faultTypeList.map(item => {
        if (this.checkedFaultType.includes(item.recordId)) {
          item.checked = true;
        } else {
          item.checked = false;
        }
        return item;
      });
    },
    updatedStaffList() {
      return this.staffList.map(({
        userId,
        nickName,
      }) => ({
        recordId: '' + userId,
        recordName: nickName,
        checked: null,
      }));
    },
  },
  created() {
    this.getConfig();
  },
  methods: {
    convertData(data) {
      const { faultSourceList, faultTypeList, staffList, sysOrderReviewConfig, } = data;
      if (faultSourceList) {
        this.faultSourceList = faultSourceList;
        this.checkedFaultSource = faultSourceList.filter(item => item.checked).map(item => item.recordId);
      }
      if (faultTypeList) {
        this.faultTypeList = faultTypeList;
        this.checkedFaultType = faultTypeList.filter(item => item.checked).map(item => item.recordId);
      }
      if (staffList) {
        this.staffList = staffList.map(({
          recordId,
          recordName,
        }) => ({
          userId: +recordId,
          nickName: recordName,
        }));
      } else {
        data.staffList = [];
      }
      if (sysOrderReviewConfig) {
        this.formData = sysOrderReviewConfig;
      }
      this.originalFormData = cloneDeep(data);
    },
    getConfig() {
      const loading = this.showLoading();
      getWorkOrderAuditConfigData().then((result) => {
        if (result.data) {
          this.convertData(result.data);
        }
      }).finally(() => {
        loading.close();
      });
    },
    updateConfig() {
      const faultSourceList = this.checkedFaultSource.map(item => ({ recordId: item, }));
      const faultTypeList = this.checkedFaultType.map(item => ({ recordId: item, }));
      const staffList = this.staffList.map(item => ({ recordId: item.userId, }));
      const params = {
        sysOrderReviewConfig: this.formData,
        faultSourceList,
        faultTypeList,
        staffList,
      };
      const loading = this.showLoading();
      updateWorkOrderAuditConfigData(params).then(() => {
        this.$message.success('操作成功');
        this.getConfig();
      }).finally(() => {
        loading.close();
      });
    },
    onCancel() {
      this.convertData(this.originalFormData);
    },
    onDelStaff(id) {
      this.staffList = this.staffList.filter(item => item.userId !== id);
    },
    onClearStaff() {
      this.staffList = [];
    },
    onEditUser() {
      this.showSelectUser = true;
      this.$nextTick(() => {
        this.$refs.compSelectUserRef.toggleSelection(this.staffList);
      });
    },
    onDialogClosed() {
      this.$refs.compSelectUserRef.onReset();
    },
    onSave() {
      const selectedUser = this.$refs.compSelectUserRef.getSelectedUser();
      if (!selectedUser.length) {
        this.$message.error('请至少选中一个用户');
        return false;
      }
      this.staffList = [
        ...selectedUser,
      ];
      this.showSelectUser = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.comp-report-error-work-order-audit {
  padding: 16px;
  background: #fff;
  .title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }
  .form-box {
    max-width: 500px;
  }
  .select-box {
    display: flex;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #E7E7E7;
    border-radius: 2px;
    .left {
      flex: 1 1 50%;
    }
    .right {
      flex: 1 1 50%;
    }
    .divider {
      width: 1px;
      margin: 0 16px;
      border: 1px solid #EEEEEE;
    }
  }
  .user-select-box {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #E7E7E7;
    border-radius: 2px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .selected-box {
      ::v-deep {
        .el-tag + .el-tag {
          margin-left: 10px;
        }
      }
    }
  }
  .btn-box {
    margin-top: 20px;
  }
}
</style>
